<template>
  <div class="PrintBox" :style="{ width: printTemplateObj.temIndex == 3 ? '376px' : '206px' }">
    <div class="choosePrintBox" v-if="chooseBtn">
      <el-radio v-model="printTemplateObj.radio" :label="printTemplateObj.temIndex" @change="changeTemIndex">{{ printTemplateObj.title }}</el-radio>
      <div class="printContent">
        <span>{{ printTemplateObj.subTitle }}</span>
      </div>
    </div>
    <div :class="[printTemplateObj.temIndex == 3 ? 'logoTemplate' : 'commonTemplate']">
      <div class="print_img">
        <el-row :gutter="20">
          <el-col :span="11">
            <div class="grid-content bg-purple" style="width:176px">
              <img class="print_QRcode" :src="printTemplateObj.url" alt="" />
            </div>
          </el-col>
           <el-col :span="11" v-if="printTemplateObj.temIndex == 3">
            <div class="grid-content bg-purple displa">
              <div class="assetsId">
                <div class="commonTemplateContent imgposi">
                  <div class="companyImg">
                    <img class="companyLogo" :src="printTemplateObj.src" alt="" />
                    <!-- <div>
                      <span>{{ printTemplateObj.companyName }}</span>
                    </div> -->
                  </div>
                </div>
                <span class="judui">资产编码:{{ printTemplateObj.id }}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="11" v-if="printTemplateObj.temIndex != 3">
            <div class="grid-content bg-purple displa commonTemplateContent" style="margin-top:30px">
              <div class="assetsId">
                <span>{{ printTemplateObj.name?'资产名称：'+printTemplateObj.name:'' }}</span>
              </div>
              <div class="assetsId">
                <span class="judui">资产编码：{{ printTemplateObj.id }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PrintBox',
  props: {
    printTemplateObj: Object,
    choosePrintBox: Boolean,
  },
  data() {
    return {
      radio: 1,
      chooseBtn: true,
    }
  },
  created() {
    this.chooseBtn = this.choosePrintBox
    this.changeTemIndex(1)
  },
  watch: {},
  methods: {
    changeTemIndex(e) {
      window.console.log(e)
      this.$emit('radioIndexChange', e)
    },
  },
}
</script>

<style lang="stylus" scoped>
.PrintBox
    margin-top 20px
    width: 438px !important;
    .choosePrintBox
        margin-left 20px
        .el-radio
            margin-bottom 16px
            >>>.el-radio__label
                font-family "SourceHanSansCN-Medium"
                font-weight 600
                color #303133
        .printContent
            margin 0 0 20px 20px
            // width 33.3%


    .commonTemplate,.logoTemplate
        margin-left 24px
        width 176px
        .print_img
            width 376px
            height 176px
            border 1px solid #DCDFE6
            margin 0 0 20px 0
            border-radius 10px
            .print_QRcode
                width 176px
                height 100%
        .commonTemplateContent
            .assetsName
                max-height 61px
                overflow hidden

            .assetsId
                line-height 38px
    .logoTemplate
        width 376px
        display flex
        justify-content flex-start
        .commonTemplateContent
            width 190px
            margin-left 10px
            .companyImg
                margin 0 0 10px 0
                .companyLogo
                    width 100px
                    height 90px
                    margin-top 20px
</style>
